<template>
  <div id="manageUser">
    <template>
      <template  style="margin-top: 15px;width: 30%">
        <el-input placeholder="用户名" @keyup.native.enter="find(username)" v-model="username" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="find(username)"></el-button>
        </el-input>
      </template>
      <div style="margin-top: 20px">
        <el-button @click="addUser()">新增</el-button>
        <el-button @click="deleteUserList()">删除</el-button>
      </div>

      <el-table
              ref="multipleTable"
              :data="userDetailVO"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 10px"
              :border=true
              @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                label="编号"
                width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="username"
                label="用户名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="idNumber"
                label="身份证"
                width="200">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="100">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机"
                width="200">
        </el-table-column>
        <el-table-column
                prop="email"
                label="邮箱"
                width="200">
        </el-table-column>
        <el-table-column
                prop="avatar"
                label="头像"
                width="200">
        </el-table-column>
        <el-table-column
                label="操作"
                show-overflow-tooltip
                width="400px">
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-tickets" round="" @click="checkDetails(scope.row)">详情</el-button>
            <el-button type="warning" icon="el-icon-edit" round="" @click="updateDetails(scope.row)">修改</el-button>
            <!-- 删除之前需要弹出一个气泡-->
            <template>
              <el-popconfirm
                      title="这是一段内容确定删除吗？"
                      @confirm="deleteUser(scope.$index, scope.row)"
              >
                <el-button  slot="reference" type="danger" icon="el-icon-delete" round="">删除</el-button>
              </el-popconfirm>
            </template>
          </template>


        </el-table-column>
      </el-table>

    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        username:'',
        userDetailVO: [],
        multipleSelection: [],
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        //发请求获取所有分类信息
          this.axios.post("http://176.17.10.223:18080/user/list/details?roleId=3").then( (response)=> {
            this.userDetailVO = response.data.data;
          })
      },
      checkDetails(row){
        this.$router.push({path: '/admin/manage/user/details',query:{username:row.username}});  //页面路由刷新
      },

      updateDetails(row){
        console.log("row====="+row.username);
        this.$router.push({path: '/admin/manage/user/update/details',query:{username:row.username}});  //页面路由刷新
      },
      deleteUser(index,row){
        // index是当前删除内容的下标   row是删除的这个对象
        let url = 'http://176.17.10.223:18080/user/deleteUserById'
        let data = 'id='+ row.id;
        console.log("请求路径: " + url);
        console.log("请求数据: " + data);
        this.axios.post(url, data).then((response) => {
          /* 实现局部刷新 */
          this.userDetailVO.splice(index,1);
          this.$message({
            message: '删除成功',
            type: 'success'
          });
        })
                .catch(function (error) {
                  console.log(error);
                });
      },

      // 查找单个用户
      find(username){
        if (username != ''){
          let url = 'http://176.17.10.223:18080/user/details'
          let data = 'username='+ username;
          this.axios.post(url,data).then( (response)=> {
            // 如果查询到的不是空数据
            if (response.data.data != null){
              // 先清空用户数组
              this.userDetailVO=[];
              // 清空搜索的用户
              this.username = '';
              this.userDetailVO[0] = response.data.data;
            }else {
              this.$message({
                message: '该用户不存在',
                type: 'error'
              });
            }
          })
        }else {
          // 当搜索的用户是空的时候  需要再执行一次方法拿到数据
          this.getData();
        }
      },
      // 记录选择的数据
      handleSelectionChange(vals) {
        this.multipleSelection = vals;
      },
      // 删除选中的数据
      deleteUserList(){
        let vals = this.multipleSelection;
        vals.forEach(val=>{
          console.log("val.username============== " + val.username)
          this.deleteUser(null,val)
        })
      },
      addUser(){
        this.$router.push({path: '/admin/manage/user/add'});  //页面路由刷新
      }
    },
  }
</script>
<style>
  .el-input-group{
    margin: 0 40%;
    position: center;
    width: auto;
  }
  .el-input-group--append .el-input__inner, .el-input-group__prepend {
    width: 300px;
  }
</style>